<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx}/res/css/main.css">
    <link rel="stylesheet" href="${ctx}/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx}/res/css/detail.css">
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <title>软装到家</title>
    
    <style>
    	.tab-list {
    		cursor: pointer;
    	}
    	.contact-header {
		    background-position: -65px -368px;
		    
		}
    #details-div {
    	color: black;
    	padding-top: 20px;
    }
    
    .layui-layer-dialog .layui-layer-content {
		color:black;
	}
    </style>
</head>
<body>

<%@include file="../head.jsp" %>
<!--产品信息-->
<input type="hidden" id="productId" name="productId" value="${p.id }"/>
<input type="hidden" id="specificationId" name="productId" value="${p.firstSpec.id }"/>
<div class="p-item-grid w-1200 margin-0-auto clear">
	<div class="p-item-preview">
		<div id="preview">
            <div class="zoom">
                <img src="${p.headImage }" width="420" height="420"" alt="" id="previewImage">
            </div>
            <div class="thumb-list">
                <a href="javascript:;" class="thumb-control disabled arraw-left"></a>
                <a href="javascript:;" class="thumb-control arraw-right"></a>
                <div class="thumb-items">
                    <ul class="thumb-slider">
                    	<c:forEach items="${images }" var="i">
                    	<li class="active"><img alt="" src="${i }" width="50" height="50"></li>
                    	</c:forEach>
                    </ul>
                </div>
            </div>
        </div>
	</div>
	<div class="p-item-inner">
        <div class="item_title">
            <h1>${p.name }</h1>
            <span class="hl_head">${p.subTitle }</span>
        </div>
        <div class="item-summary">
            <div class="summary-success">
                <div class="comment-count">
                	<a class="count" href="#">${p.totalSold }</a>
                    <p class="comment">交易成功</p>
                </div>
            </div>
        	<div class="item-price">
        		<div class="item-dt">价格</div>
        		<div class="item-dd">￥ <fmt:formatNumber value="${p.minPrice }" type="currency" pattern="0.00"/> 
        		<!-- 
        		- <fmt:formatNumber value="${p.maxPrice }" type="currency" pattern="0.00"/> --></div>
        	</div>
        	<div class="item-price">
        		<div class="item-dt">欧工价</div>
        		<div class="item-dd">
        			<strong class="item-price-red">￥<fmt:formatNumber value="${p.minPrice * 0.8 }" type="currency" pattern="0"/>.00</strong>
        			<a class="item-customized">独家定制</a>
        		</div>
        	</div>
        </div>
        <div class="item-choose">
        	<!-- 
        	<div class="choose-option">
	        	<div class="dt">类型</div>
	            <div class="dd">
	            	<div class="item-option selected">
	            		<b></b>
	            		<a href="javascript:;">平板衣柜两件套</a>
	            	</div>
	            </div>
        	</div>
        	 -->
        	<div class="choose-option">
        		<div class="dt">颜色</div>
            	<div class="dd">
	            	<div class="item-option selected">
	            		<b></b>
	            		<a href="javascript:;"> ${p.firstSpec.spec2 }</a>
	            	</div>
	            </div>
        	</div>
        	<div class="choose-option">
        		<div class="dt">规格</div>
	            <div class="dd">
	            	<div class="item-text">
	            		<a href="javascript:;">${p.firstSpec.spec1 }</a>
	            	</div>
	            </div>
        	</div>
        	<div class="choose-option">
	        	<div class="dt">数量</div>
	            <div class="dd">
	            	<div class="choose-amount">
                        <div class="wrap-input">
                            <a class="btn-reduce disabled" href="#">-</a>
                            <a class="btn-add" href="#">+</a>
                            <input class="text" id="buy-num" value="1">
                        </div>
                    </div>
                    <a class="btn-append" style="cursor:pointer;">加入购物车</a>
	            </div>
        	</div>
        	<!-- 
        	<div class="choose-option service-wrap">
	        	<div class="dt">服务承诺</div>
	            <div class="dd">
	            	<div class="service-list">
                        <a class="icon-jin">金牌卖家</a>
                        <a class="icon-fu">优质服务</a>
                        <a class="icon-xian">运费险</a>
                    </div>
	            </div>
        	</div>
        	 -->
        </div>
	</div>
	<div class="p-item-ext">
		<div class="extInfo">
            <div class="brand-logo">
		        <a href="#" target="_blank">
		            <img src="http://7xjd68.com1.z0.glb.clouddn.com/80d9c388-d9c1-406d-845a-9e30e4307f79" width="200" title="明清花梨">
		        </a>
		    </div>
        	<div class="seller-btns">
                <a class="btn-share" href="#" target="_blank" title="明清花梨"><span>分享</span></a>
                <a class="btn-collect" href="#" target="_blank" title="明清花梨"><span>收藏</span></a>
    		</div>
    		<div class="seller-score-box">
                <a href="#" target="_blank">
                    <div class="score-sum">9.55</div>
                    <div class="score-part score-comment">
                        <span class="score-desc">商品评价</span>
                        <span class="score-detail">
                        	<em title="5分" class="number">5分</em>
                        </span>
                    </div>
                    <div class="score-part">
                        <span class="score-desc">服务态度</span>
                        <span class="score-detail">
                        	<em title="5分" class="number">5分</em>
                        </span>
                    </div>
                    <div class="score-part">
                        <span class="score-desc">物流速度</span>
                        <span class="score-detail">
                        	<em title="5分" class="number">5分</em>
                        </span>
                    </div>
                </a>
           </div>
           <div class="seller-contact">
           		<div class="contact-header">联系卖家</div>
           		<div class="contact-code"><img src="${ctx }/res/img/other/seller-code.jpg"/></div>
           		<!-- 
           		<div class="contact-text">产品二维码</div>
           		 -->
           </div>
        </div>
    </div>
</div>
<div class="w-1200 margin-0-auto clear">
	<div class="tab-list-title">
		<ul class="tab-list">
			<li class="active" onclick="$('#details-div').hide();$('#order-group').show()"><span>订单组合</span></li>
			<li class="splider" onclick="$('#details-div').show();$('#order-group').hide()"><span>商品详情</span></li>
		</ul>
	</div>
	<div class="tab-list-content" id="order-group">
		<ul class="product-list">
			<li>
                <a href="${ctx }/product/detail?id=${p1.id}">
                    <img src="${p1.headImage }">
                    <p class="name">${p1.name }</p>
                    <p class="price">
                        <span>￥ <fmt:formatNumber value="${p1.firstSpec.realPrice }" type="currency" pattern="0.00"/> </span>  
                        <del class="orign-price">￥<fmt:formatNumber value="${p1.firstSpec.marketPrice }" type="currency" pattern="0.00"/></del>
                    </p>
                </a>
            </li>
            <li class="list-addbtn"></li>
            <li>
                <a href="${ctx }/product/detail?id=${p2.id}">
                    <img src="${p2.headImage }">
                    <p class="name">${p2.name }</p>
                    <p class="price">
                        <span>￥ <fmt:formatNumber value="${p2.firstSpec.realPrice }" type="currency" pattern="0.00"/> </span>  
                        <del class="orign-price">￥<fmt:formatNumber value="${p2.firstSpec.marketPrice }" type="currency" pattern="0.00"/></del>
                    </p>
                </a>
            </li>
            
		</ul>
		<div class="collections-box">
			<span class="collections-text">2件商品搭配总价：</span>
			<span class="collections-price">￥<fmt:formatNumber value="${p1.firstSpec.realPrice + p2.firstSpec.realPrice - 100}" type="currency" pattern="0.00"/></span>
			<a class="btn-append">加入购物车</a>
		</div>
	</div>
	<div class="tab-list-content" style="display:none;" id="details-div">
		${p.details }
	</div>
</div>
<div class="w-1200 margin-0-auto clear">
	<div class="tab-list-title">
		<ul class="tab-list">
			<li class="active">同品牌商品</li>
			<!-- 
			<li>同类商品</li>
			 -->
		</ul>
	</div>
	<div class="tab-list-content">
		<ul class="product-list">
			<c:forEach items="${sameBrandProducts }" var="p">
			<li>
                <a href="${ctx }/product/detail?id=${p.id}">
                    <img src="${p.headImage }">
                    <p class="name">${p.name }</p>
                    <p class="price">
                        <span>￥ <fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/> </span>  
                        <del class="orign-price">￥<fmt:formatNumber value="${p.firstSpec.marketPrice }" type="currency" pattern="0.00"/></del>
                    </p>
                </a>
            </li>
            </c:forEach>
		</ul>
	</div>
</div>
<div class="w-1200 margin-0-auto clear">
	<div class="tab-list-title">
		<ul class="tab-list">
			<li class="active">推荐产品</li>
		</ul>
	</div>
	<div class="tab-list-content">
		<ul class="product-list">
			<c:forEach items="${recProducts }" var="p">
			<li>
                <a href="${ctx }/product/detail?id=${p.id}">
                    <img src="${p.headImage }">
                    <p class="name">${p.name }</p>
                    <p class="price">
                        <span>￥ <fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/> </span>  
                        <del class="orign-price">￥<fmt:formatNumber value="${p.firstSpec.marketPrice }" type="currency" pattern="0.00"/></del>
                    </p>
                </a>
            </li>
            </c:forEach>
		</ul>
	</div>
</div>
<%@include file="../foot.jsp" %>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var thumbs = $('.thumb-slider li').length;
        var thumbWidth = 73;
        var currentIndex = 0;
        $('.thumb-slider').width(thumbWidth * thumbs);
        $('.arraw-left').click(function(){
        	if(currentIndex == 0)return;
        	var width = thumbWidth * (currentIndex - 1);
        	$('.thumb-slider').animate({"left":-width + 'px'}, 300);
        	currentIndex -= 1;
        });
        $('.arraw-right').click(function(){
        	if(currentIndex == (thumbs-5))return;
        	var width = thumbWidth * (currentIndex + 1);
        	$('.thumb-slider').animate({"left":-width + 'px'}, 300);
        	currentIndex += 1;
        });
        $('.thumb-slider li').click(function(){
        	$('.thumb-slider li.active').removeClass('active');
        	$(this).addClass('active');
        	var image = $(this).find('img').attr('src');
        	$('#previewImage').attr('src', image);
        });
        $('.btn-append').click(function() {   //添加至购物车
        	var productId = $('#productId').val();
        	var quantity = $('#buy-num').val();
        	var specificationId = $('#specificationId').val();
        	var json = {};
        	json["productId"] = productId;
        	json["quantity"] = quantity;
        	json["specificationId"] = specificationId;
        	$.ajax({
        		url: "${ctx}/cart/addCart",
        		data:json,
        		dataType: "json",
        		type: "get",
        		success: function(data) {
        			if (data.success) {
        				//loading带文字
        				layer.msg('购物车添加成功!',{time: 1000, icon:6,shade: [0.5, '#f5f5f5']});
        			} else {
        				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
        			}
        		}
        	});
        });
    }); 
</script>
</body>
</html>
